﻿<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="../static/css/swiper.min.css" rel="stylesheet" type="text/css"/>
    <link href="../static/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../static/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="../static/img/favicon.ico" rel="shortcut icon"/>
    <link href="https://fonts.googleapis.com/css?family=Lato:700,900%7CDidact+Gothic" rel="stylesheet">
    <title>BING2</title>
</head>

<body>
<div class="is-mobile"></div>
<!-- LOADER -->
<div id="loader-wrapper">
    <div class="cssload-container">
        <div class="cssload-whirlpool"></div>
    </div>
</div>
<!-- LOADER -->

<!-- HEADER -->
<header class="header-style header-style2">
    <div class="hamburger-icon3">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="header-content">
        <div class="row">
            <div class="col-xs-6 col-sm-2">
                <a class="logo" href="index">
                    <img src="../static/img/bing2.jpg" alt="#"/>
                </a>
            </div>
            <div class="col-xs-6 col-sm-10">
                <div class="hamburger-icon">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="hamburger-icon2">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <!-- 导航栏 -->
                <nav class="normal-s">
                    <ul>
                        <li class="active">
                            <a href="/index">HOME</a>
                        </li>
                        <li class="">
                            <a href="https://tzzs.github.io">BLOG</a>
                        </li>
                        <li>
                            <a href="/index">ABOUT</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="section">
                <p>
                    bing2 必应每日高清壁纸.
                    Bing2 Bing Daily HD Wallpaper.
                </p>
            </div>
            <div class="normal-3 section">
                <ul>
                    <li>
                        <a href="tel:"></a>
                    </li>
                    <li>
                        <a href="mailto:"></a>
                    </li>
                </ul>
                <div class="empty-space h10-xs fl"></div>
                <div class="follow">
                    <a class="social" href="#">
                        <i class="fa fa-facebook" aria-hidden="true"></i>
                    </a>
                    <a class="social" href="#">
                        <i class="fa fa-instagram" aria-hidden="true"></i>
                    </a>
                    <a class="social" href="#">
                        <i class="fa fa-pinterest-p" aria-hidden="true"></i>
                    </a>
                    <a class="social" href="#">
                        <i class="fa fa-twitter" aria-hidden="true"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="mob-icon"></div>
    </div>
</header>
<!-- HEADER -->

<!-- OVERLAY-MENU -->
<div class="overlay-wrapper height-min">
    <div class="overlay-animation"></div>
    <div class="flex">
        <div class="flex-in">
            <div class="overlay-menu">
                <div class="container">
                    <div class="row">
                        <div class="btn-close"><span></span><span></span></div>
                        <div class="col-lg-2 col-lg-offset-5">
                            <ul>
                                <li class="">
                                    <a href="/index">HOME</a>
                                </li>
                                <li class="">
                                    <a href="https://tzzs.github.io">BLOG</a>
                                </li>
                                <li>
                                    <a href="/">ABOUT</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end OVERLAY-MENU -->

<!-- content -->
<div id="content-wrapper">

    <div class="skrollr-item square-xs"
         data-0="top: 215px; left: 180px; -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg);"
         data-400="top: 250px; left: 250px; -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg);"></div>
    <div class="skrollr-item triangle-md"
         data-0="top: 315px; left: 870px; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);"
         data-400="top: 230px; left: 770px; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);"></div>
    <div class="skrollr-item triangle-md"
         data-0="top: 210px; right: 150px; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);"
         data-400="top: 300px; right: 200px; -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg);"></div>
    <div class="skrollr-item square-md"
         data-0="top: 460px; right: 355px; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);"
         data-400="top: 520px; right: 280px; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);-ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg);"></div>
    <div class="skrollr-item circle-sm" data-0="top: 675px; left: 400px;" data-600="top: 500px; left: 600px;"></div>
    <div class="skrollr-item circle-lg" data-0="top: 690px; right: 635px;" data-700="top: 780px; right: 670px;"></div>
    <div class="skrollr-item square-xs"
         data-0="top: 750px; right: 190px; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);"
         data-700="top: 900; right: 250px; -ms-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg);"></div>
    <div class="skrollr-item triangle-sm"
         data-0="top: 1035px; left: 240px; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);"
         data-1200="top: 900px; left: 140px; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);"></div>
    <div class="skrollr-item triangle-lg"
         data-0="top: 990px; left: 950px; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);"
         data-1200="top: 1300px; left: 900px; -ms-transform: rotate(120deg); -webkit-transform: rotate(120deg); transform: rotate(120deg);"></div>
    <div class="skrollr-item circle-md" data-0="top: 1370px; left: 625px;" data-1200="top: 1200px; left: 725px;"></div>
    <div class="skrollr-item square-lg"
         data-0="top: 1360px; right: 325px; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);"
         data-1200="top: 1160px; right: 225px; -ms-transform: rotate(-120deg); -webkit-transform: rotate(-120deg); transform: rotate(-120deg);"></div>
    <div class="skrollr-item triangle-sm"
         data-0="top: 1540px; left: 850px; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);"
         data-1400="top: 1780px; left: 1050px; -ms-transform: rotate(-190deg); -webkit-transform: rotate(-190deg); transform: rotate(-190deg);"></div>
    <div class="skrollr-item circle-sm" data-0="top: 1665px; left: 290px;" data-1500="top: 1465px; left: 250px;"></div>
    <div class="skrollr-item square-xs"
         data-0="top: 1840px; left: 410px; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);"
         data-1500="top: 1570px; left: 610px; -ms-transform: rotate(140deg); -webkit-transform: rotate(140deg); transform: rotate(140deg);"></div>
    <div class="skrollr-item square-sm"
         data-0="top: 2040px; left: 630px; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);"
         data-1200="top: 1970px; left: 430px; -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg);"></div>
    <div class="skrollr-item circle-lg" data-0="top: 1640px; right: 165px;"
         data-1200="top: 1540px; right: 265px;"></div>
    <div class="skrollr-item triangle-md"
         data-0="top: 1990px; right: 520px; -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg);"
         data-1300="top: 2060px; right: 260px; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);"></div>

    <div class="empty-space h150-sm h75-xs"></div>
    <div class="container-fluid-style1">
        <div class="align-wrapper">

            {% if imagesPath %}
                {% for imagePath in imagesPath %}
                    <div class="img-block-wrapper">
                        <div class="empty-space h30-xs h50-sm h110-lg"></div>
                        <div class="img-block">
                            <a href={% static imagePath.path %}>
                                <img class="lazyload lazy" style="" lazyload="true"
                                     data-original='{% static imagePath.path %}.jpg' alt={{ imagePath.copyright }}></a>
                            <div class="description-wrapper">
                                <div class="description">
                                    <a class="biggest-1 mouseover-1"
                                       href="https://cn.bing.com{{ imagePath.copyrightlink }}">{{ imagePath.enddate }}</a>
                                    <div class="empty-space h5-xs"></div>
                                    <p class="smaller">ILLUSTRATION</p>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% endif %}


        </div>
    </div>
    <div class="empty-space h55-xs h95-sm"></div>

    <!-- footer -->
    <footer class="footer-style footer-style2">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-4 col-xs-12 text-left">
                    <a class="logo" href="index.html">
                        <img src="../static/img/bing2.jpg" alt="#"/>
                    </a>
                    <div class="empty-space h15-xs h0-md"></div>
                </div>
                <div class="col-md-6 col-sm-8 col-xs-12">
                    <nav class="small-2">
                        <ul>
                            <li class="footer-nav active">
                                <a href="/index">HOME</a>
                            </li>
                            <li class="footer-nav">
                                <a href="https://tzzs.github.io">BLOG</a>
                            </li>
                            <li class="footer-nav">
                                <a href="/about">ABOUT</a>
                            </li>
                        </ul>
                    </nav>
                    <div class="empty-space h20-xs h0-md"></div>
                </div>
            </div>
            <div class="empty-space h40-xs fl"></div>
            <!--
            <div class="row">
                <div class="col-xs-12">
                    <div class="follow">
                        <a class="social" href="#" target="_blank">
                            <i class="fa fa-facebook" aria-hidden="true"></i>
                        </a>
                        <a class="social" href="#" target="_blank">
                            <i class="fa fa-instagram" aria-hidden="true"></i>
                        </a>
                        <a class="social" href="#" target="_blank">
                            <i class="fa fa-pinterest-p" aria-hidden="true"></i>
                        </a>
                        <a class="social" href="#" target="_blank">
                            <i class="fa fa-twitter" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
            </div>
            -->
            <div class="empty-space h35-xs fl"></div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="copyright normal-s">
                        Copyright &copy; 2019-2020. Powered by TZZ.
                        <a href="http://www.beian.miit.gov.cn/">鲁ICP备17030961号-3</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- footer -->
</div>
<!-- content -->


<script src="../static/js/jquery-2.2.4.min.js"></script>
<script src="../static/js/swiper.jquery.min.js"></script>
<script src="../static/js/skrollr.min.js"></script>
<script src="../static/js/global.js"></script>

<!-- SUBSCRIBE -->
<script src="../static/js/subscribe.form.js"></script>

<script>
    var viewHeight = document.documentElement.clientHeight;//可视区高度
    function lazyload() {
        var eles = document.querySelectorAll('img[data-original][lazyload]')
        Array.prototype.forEach.call(eles, function (item, index) {
            var rect;
            if (item.dataset.original === "")
                return;
            rect = item.getBoundingClientRect();//获得页面中某个元素的左，上，右，下相较于浏览器视窗的位置
            if (rect.bottom >= 0 && rect.top < viewHeight) {
                !function () {
                    var img = new Image();
                    img.src = item.dataset.original;
                    img.onload = function () {
                        item.src = img.src;
                    };
                    item.removeAttribute("data-original");//下次不再遍历
                    item.removeAttribute("lazyload");
                }()
            }
        })
    }

    lazyload();
    document.addEventListener("scroll", lazyload)
</script>


</body>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?3b15b126977d0495f57d1d1d390f9232";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</html>